<template>
	<view class="app">
		<view v-if="member.is_plus_id" class="use-area dflex-b fwb ft-base margin-t0" style="background: #f5e7e6;"
			@click="toMember">
			<view>{{member.is_plus}}<text
					v-if="member.vip_price_discount">{{member.vip_price_discount}}折</text><text
					v-if="member.double_integral">,双倍积分</text><text v-if="member.partner">,分销合伙人</text>
			</view>
			<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
		</view>
		<view v-if="!member.is_plus_id" class="use-area dflex-b fwb ft-base margin-t0" style="background: #f5e7e6;"
			@click="toMember">
			<view>开通会员,福利不断</view>
			<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<view class="input-box u-flex">
			<view class="sign">￥</view>
			<view class="money-box">
				<text v-if="money===''" class="tips">输入金额</text>
				<text v-else>{{ money }}</text>
			</view>
			<view class="cursor" v-if="money===''"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view
			style="border-top-left-radius: 40rpx;border-top-right-radius: 40rpx;height: 266rpx;padding-left: 50rpx;background-color: #FFFFFF;">
			<view class="input-box u-flex"
				style="border-bottom: 1px solid #c1c1c1;border-bottom-left-radius: 0rpx;border-bottom-right-radius: 0rpx;">
				<view class="sign">￥</view>
				<view class="money-box">
					<text v-if="money===''" class="tips">输入金额</text>
					<text v-else>{{ money }}</text>
				</view>
				<view class="cursor" v-if="money===''"></view>
			</view>
		</view>
		<view v-if="wmz_ad_open" style="width: 96%;margin: 40rpx auto;">
			<template v-if="adversing_type">
				<ad :unit-id="wmz_ad_unit" ad-intervals="30"></ad>
			</template>
			<template v-else>
				<wmz-ad-banner :ad_unit="wmz_ad_unit" />
			</template>
		</view>
		<!-- #endif -->
		<keyboard @confirm="confirm" ref="keyboard" @input="input"></keyboard>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	let spaceId
	let appId = 'def1da4565222ccc05d977461539689c'
	let shopId = 'def1da4565222ccc05d977461539689c'
	import keyboard from '@/components/keyboard.vue'
	let _this;
	let gatheringCode
	export default {
		data() {
			return {
				member:{},
				money: "",
				authPlatform: "",
				authCode: "",
				user: null,
				wmz_ad_open: false,
				wmz_ad_unit: ""
			}
		},
		components: {
			keyboard
		},
		onLoad(e) {
			_this = this
			// #ifdef MP-ALIPAY
			const alipayExtJson = my.getExtConfigSync();
			if (alipayExtJson && alipayExtJson.appId) {
				spaceId = alipayExtJson.spaceId;
				appId = alipayExtJson.appId;
				shopId = alipayExtJson.shopId;
			} else {
				let templateId = my.getAppIdSync().appId
				uni.setStorageSync("templateId", templateId)
			}
			// #endif

			// #ifdef MP-WEIXIN
			const wechatExtJson = uni.getExtConfigSync()
			if (wechatExtJson && wechatExtJson.appId) {
				spaceId = wechatExtJson.spaceId;
				appId = wechatExtJson.appId;
				shopId = wechatExtJson.shopId;
			} else {
				const accountInfo = wx.getAccountInfoSync();
				uni.setStorageSync("templateId", accountInfo.miniProgram.appId)
			}
			// #endif

			if (e.shopId) {
				shopId = e.shopId;
			}

			if (e.qrCode || e.q || uni.getStorageSync('qrCode')) {
				let scene = e.qrCode || e.q || uni.getStorageSync('qrCode');
				uni.setStorageSync('qrCode', scene);

				// #ifdef MP-WEIXIN
				scene = decodeURIComponent(scene);
				// #endif

				if (scene.indexOf("shopId") > -1) {
					shopId = scene.split("shopId=")[1].split("&")[0];
				}
				if (scene.indexOf("gathering") > -1) {
					gatheringCode = scene.split("gathering=")[1].split("&")[0];
				}
			}

			uni.setStorageSync('wmzmall_user_space_id', spaceId);
			uni.setStorageSync('wmzmall_user_app_id', appId);
			uni.setStorageSync('wmzmall_user_shop_id', shopId);

			this.getAuthCode()
			// #ifdef MP-WEIXIN
			this.wxaAdverConfigGet()
			// #endif
		},
		methods: {
			...mapMutations(['login']),
			wxaAdverConfigGet() {
				this.$func.wmz_adver.call('wmzAdverCatering/adverShopConfigGet', {
					appId: appId,
					shopId: shopId,
					adProvider: "wx"
				}).then(res => {
					if (res.code === 200) {
						_this.wmz_ad_open = true
						_this.wmz_ad_unit = res.data.page_pay_before.adver_id
						_this.adversing_type = res.data.page_pay_before.adversing_type
					}
				})
			},
			toMember() {
				if (this.member && this.member.vip) {
					uni.navigateTo({
						url: '/sub-user/pages/member/member'
					})
					return;
				}
			
				uni.navigateTo({
					url: '/sub-user/pages/member/member-not'
				})
			},
			getAuthCode() {
				// #ifdef MP-ALIPAY
				_this.authPlatform = 'alipay';

				uni.login({
					scopes: ['auth_base'],
					success(res) {
						if (res && res.code) {
							_this.authCode = res.code;
							_this.cloudLogin();
						} else {
							_this.$api.msg('获取支付宝授权码失败');
						}
					}
				});
				// #endif

				// #ifdef MP-WEIXIN
				_this.authPlatform = 'wechat';

				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success(res) {
						if (res && res.code) {
							_this.authCode = res.code;
							_this.cloudLogin();
						} else {
							_this.$api.msg('获取微信授权码失败');
						}
					}
				});
				// #endif
			},

			cloudLogin() {
				if (!_this.authCode) {
					_this.$api.msg('用户授权码参数丢失');
					return;
				}
				if (!_this.authPlatform) {
					_this.$api.msg('用户授权平台参数丢失');
					return;
				}

				let methodName;
				if ('alipay' === _this.authPlatform) {
					methodName = 'member/loginByAlipay';
				} else if ('wechat' === _this.authPlatform) {
					methodName = 'member/loginByWeixin';
				} else {
					_this.$api.msg('用户授权平台参数不正确');
					return;
				}
				let params = {
					app_id: appId,
					code: _this.authCode,
					templateId: uni.getStorageSync("templateId")
				};

				_this.$func.wmzmall.call(methodName, params).then(res => {
					if (res && res.code && 200 === res.code && res.datas) {
						_this.login(res.datas);
						if (res.datas.user) {
							_this.user = res.datas.user;
						}
						if (res.datas.member) {
							_this.member = res.datas.member;
							if (_this.member.member_amount) {
								_this.balanceMoney = _this.member.member_amount;
							}
						}
					} else if (res.msg) {
						_this.$api.msg(res.msg);
					} else {
						_this.$api.msg('用户授权登录失败');
					}
				}).catch(err => {
					console.log(err);
				});
			},
			input(e) {
				this.money = e
				this.currentDishessId = ""
				this.currentQuickOrderId = ""
			},
			//确认支付
			confirm: function() {
				if (!this.money) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none',
					});
					return;
				}
				this.$refs.keyboard.showPayText()
				let payWay;
				if ('alipay' === _this.authPlatform) {
					payWay = '支付宝';
				} else if ('wechat' === _this.authPlatform) {
					payWay = '微信支付';
				}
				uni.showLoading();
				let params = {
					appId: appId,
					shopId: shopId,
					authCode: _this.authCode,
					authPlatform: _this.authPlatform,
					payWay: payWay,
					payMoney: _this.money
				};
				_this.$func.wmzmall.call('gathering/orderPay', params).then(res => {
					if (res.code === 200) {
						var data = res.datas.data;
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: res => {
								uni.hideLoading();
								this.$refs.keyboard.resetConfirmText()
								uni.redirectTo({
									url: '/pages/quickpay/paySuccess?money=' + _this
										.money + '&payWay=' + payWay
								});
							},
							fail: res => {
								uni.showToast({
									title: '已取消支付',
									icon: 'none',
								});
								uni.hideLoading();
								var param = {
									appId: appId,
									shopId: shopId,
									money: _this.money,
									gathering: gatheringCode
								}
								_this.$func.wmzmall.call('gathering/orderCancel', param).then(
									res => {})
							},
							complete: () => {},
						});
						// #endif
						// #ifdef MP-ALIPAY
						uni.requestPayment({
							provider: 'alipay',
							tradeNO: data.trade_no,
							success: res => {
								uni.hideLoading();
								if (res.resultCode === '9000') {
									this.$refs.keyboard.resetConfirmText()
									uni.redirectTo({
										url: '/pages/quickpay/paySuccess?money=' + _this
											.money + '&payWay=' + payWay
									});
								} else if (res.resultCode === '6001') {
									uni.showToast({
										title: '已取消支付',
										icon: 'none',
									});
									uni.hideLoading()
									var param = {
										appId: appId,
										shopId: shopId,
										money: _this.money,
										gathering: gatheringCode
									}
									_this.$func.wmzmall.call('gathering/orderCancel', param).then(
										res => {})
								}
							},
							fail: res => {
								uni.showToast({
									title: '已取消支付',
									icon: 'none',
								});
								uni.hideLoading();
								var param = {
									appId: appId,
									shopId: shopId,
									money: _this.money,
									gathering: gatheringCode
								}
								_this.$func.wmzmall.call('gathering/orderCancel', param).then(
									res => {})
								this.$refs.keyboard.resetConfirmText()
							},
							complete: () => {
								this.$refs.keyboard.resetConfirmText()
								uni.hideLoading();
							},
						});
						// #endif
					} else {
						uni.hideLoading();
						_this.$api.msg(res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					_this.$api.msg("支付失败,请退出刷新重试");
				});
			},
		},
	}
</script>

<style lang="scss">
	.app {
		width: 100%;
		background-color: #F8F8F8;
	}

	.price-box {
		background-color: #fff;
		// height: 120upx;
		font-size: 28upx;
		margin: 10upx;
		padding: 20upx 10upx;
		color: #909399;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-content: center;
		flex-wrap: nowrap;

		.price {
			font-size: 32upx;
			color: #303133;
			flex: 0 0 70%;
			// &:before {
			//     content: '￥';
			//     font-size: 32upx;
			// }
		}
	}

	.pay-type-list {
		margin: 20upx 10upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: 26rpx;
			color: #343434;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: #343434;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: 26rpx;
		color: #fff;
		background: #adb838;
		border: 1px solid #adb838;
		border-radius: 10upx;
	}

	.content {
		font-size: 28rpx;

		.btn {
			margin-top: 60rpx;
			padding: 0 60rpx;
		}
	}

	.hitokoto-box {
		position: fixed;
		bottom: 700rpx;
		width: 100%;
		color: #999;

		.hitokoto-content {
			padding: 0 60rpx;
			margin-top: 360rpx;
			margin-bottom: 30rpx;
		}

		.from {
			padding: 0 60rpx;
			text-align: right;

			text {
				color: #aaa;
			}
		}
	}


	.input-box {
		position: fixed;
		top: 130rpx;
		left: 50%;
		width: 700rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		padding: 0 40rpx 0 30rpx;
		background-color: #ffffff;
		height: 120rpx;
		border-radius: 12rpx;
		box-sizing: border-box;

		.tips {
			color: #868686;
			font-size: 32rpx;
			font-weight: bold;
		}

		.sign {
			// margin-left: auto;
			font-size: 36rpx;
			font-weight: bold;
			transform: translateY(8rpx);
		}

		.money-box {
			color: #333;
			font-size: 56rpx;
			font-weight: bold;
		}

		.cursor {
			position: absolute;
			left: 60rpx;
			width: 4rpx;
			height: 58rpx;
			background-color: #768afa;
			animation: flicker 1.2s infinite;

			@keyframes flicker {

				0%,
				100% {
					opacity: 0;
				}

				50% {
					opacity: 1;
				}
			}
		}
	}

	::v-deep .keyboard .list .key {
		box-sizing: border-box;
	}


	.detail {
		width: 100%;
		min-height: 1vh;
		max-height: calc(90vh - 320rpx - 80rpx - 120rpx);

		.wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;

			.properties {
				width: 100%;
				border-top: 2rpx solid #f9f9f9;
				padding: 10rpx 30rpx 0;
				display: flex;
				flex-direction: column;

				.property {
					width: 100%;
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					padding-bottom: -16rpx;

					.title {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 20rpx;

						.name {
							font-size: 26rpx;
							color: #343434;
							margin-right: 20rpx;
						}
					}

					.values {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.value {
							border-radius: 8rpx;
							background-color: #f9f9f9;
							padding: 16rpx 30rpx;
							font-size: 26rpx;
							color: #999;
							margin-right: 16rpx;
							margin-bottom: 16rpx;
							text-align: center;

							&.default {
								background-color: #DBA871;
								;
								color: #ffffff;
							}
						}
					}
				}
			}
		}

		.items {
			display: flex;
			flex-direction: column;
			padding-bottom: -30rpx;

			.good {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					border-radius: 8rpx;
				}

				.right {
					flex: 1;
					// height: 160rpx;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					padding-right: 14rpx;

					.name {
						font-size: 26rpx;
						margin-bottom: 10rpx;
					}

					.tips {
						width: 100%;
						height: 40rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						color: #999;
						// margin-bottom: 10rpx;
					}

					.price_and_action {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							font-size: 26rpx;
							font-weight: 600;
						}

						.btn-group {
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;

							.btn {
								padding: 0 20rpx;
								box-sizing: border-box;
								font-size: 24rpx;
								height: 44rpx;
								line-height: 44rpx;

								&.property_btn {
									border-radius: 24rpx;
									background-color: #ADB838;
									border: 1px solid #ADB838;
								}

								&.add_btn,
								&.reduce_btn {
									padding: 0;
									width: 44rpx;
									border-radius: 44rpx;
									min-width: 0;
								}
							}

							.dot {
								position: absolute;
								background-color: #ffffff;
								border: 1px solid #DBA871;
								;
								color: #DBA871;
								;
								font-size: 24rpx;
								width: 36rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								border-radius: 100%;
								right: -12rpx;
								top: -10rpx;
							}

							.number {
								width: 44rpx;
								height: 44rpx;
								line-height: 44rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}

	.add-to-cart-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #DBA871;
		color: #ffffff;
		font-size: 26rpx;
		height: 80rpx;
		border-radius: 0 0 12rpx 12rpx;
	}
</style>